<template>
  <!-- 阈值设置的左侧树图菜单 -->
  <div class="thresholdvalue-menu">
    <div class="content borderStyle">
      <div class="content-btn centerbox">
        <el-button type="primary" @click="changeMenu(0)" :class="{actives:menuName===0}">主设备</el-button>
        <el-button type="primary" @click="changeMenu(1)" :class="{actives:menuName===1}">辅控</el-button>
        <el-button type="primary" @click="changeMenu(2)" :class="{actives:menuName===2}">在线监测</el-button>
      </div>
      <div class="content-tree">
        <el-input placeholder="输入关键字进行过滤" v-model="filterText">
          <i slot="prefix" class="el-input__icon el-icon-search search"></i>
        </el-input>
        <el-tree
          ref="tree"
          :filter-node-method="filterNode"
          :data="treeData"
          :props="defaultProps"
          @node-click="handleNodeClick"
          icon-class="custom"
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.5)"
        >
          <div slot-scope="{ node }">
            <el-tooltip effect="dark" placement="top" :content="node.label">
              <div>
                <span>{{ node.label }}</span>
              </div>
            </el-tooltip>
          </div>
        </el-tree>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import { AuxiliaryMonitorModule } from "@/store/modules/AuxiliaryMonitor";
import { Tree } from "element-ui";
import { log } from "three";

interface dataType {
  label: string;
  children?: object | string;
}
@Component
export default class extends Vue {
  filterText: string = "";
  $refs!: {
    tree: Tree;
  };
  @Watch("filterText")
  private watchfilterText(val: string) {
    let tree = this.$refs.tree;
    // console.log(tree);

    if (tree) {
      tree.filter(val);
    }
  }
  filter(value, node) {
    let data = node.data;
    let name = data.name;
    let type = data.type;
    if (type === "station") {
      return name.indexOf(value) !== -1;
    }
    if (node.parent) {
      return this.filter(value, node.parent);
    } else {
      return true;
    }
  }
  filterNode(value: string, data, node) {
    let test = this.filter(value, node);
    return test;
  }

  // 主设备data
  public data1: dataType[] = [];
  // 辅控data
  public data2: dataType[] = [];
  // 在线监测data
  public data3: dataType[] = [];
  loading: boolean = true;

  list1 = {
    station: "", //变电站id
    bayIdList: [],
    bayName: "", //间隔单元名称
    remoteType: "", //四遥类型1:遥测，2:遥信，3:遥控，4:遥调,可用值:1,2,3,4
  };
  list2 = {
    station: "", //变电站id
    areaId: "",
    systemId: "",
  };
  list3 = {
    station: "", //变电站id
    bayName: "", //间隔单元名称
    systemId: "",
  };

  get treeData() {
    if (this.menuName === 0) {
      return this.data1;
    } else if (this.menuName === 1) {
      return this.data2;
    } else if (this.menuName === 2) {
      return this.data3;
    } else {
      return this.data1;
    }
  }
  // 当前data
  public defaultProps: dataType = {
    label: "name",
    children: "child",
  };
  // 0：主设备 1：辅控 2：在线监测
  public menuName: number = 0;

  changeTreeData() {
    // console.log(this.menuName);
    // console.log(this.data1.length);

    if (this.menuName === 0 && this.data1.length < 1) {
      this.getMasterDeviceTree();
      // console.log(1);
    } else if (this.menuName === 1 && this.data2.length < 1) {
      this.getAuxiliaryTreeChild();
    } else if (this.menuName === 2 && this.data3.length < 1) {
      this.getOnlineMonitorTreeChild();
    }
  }
  mounted() {
    this.changeTreeData();
    AuxiliaryMonitorModule.gettreeList0("city");
  }
  changeMenu(val: number) {
    this.menuName = val;
    if (val != 0) {
      AuxiliaryMonitorModule.gettreeList0("");
    }
    this.changeTreeData();
    AuxiliaryMonitorModule.getthresholdvalueBtn(val);
  }
  // 递归
  setData(mydata, node): any {
    if (node.data) {
      let data = node.data;
      let obj = {
        // 主设备
        cj: {
          name: "cjName",
          id: "cjId",
        },
        jg: {
          name: "jgName",
          id: "jgId",
        },
        voltage: {
          name: "voltageName",
          id: "voltageId",
        },
        station: {
          name: "stationName",
          id: "stationId",
        },
        city: {
          name: "cityName",
          id: "cityId",
        },
        // 辅控
        area: {
          name: "areaName",
          id: "areaId",
        },
        menu: {
          name: "menuName",
          id: "menuId",
        },
        // 在线监测
        device: {
          name: "deviceName",
          id: "deviceId",
        },
        monitor: {
          name: "monitorName",
          id: "monitorId",
        },
      };
      let type = data.type;
      let itemObj = obj[type] || {};
      let nameKey = itemObj.name;
      if (nameKey) {
        mydata[nameKey] = data.name;
      }
      let idKey = itemObj.id;
      if (idKey) {
        mydata[idKey] = data.id;
      }
    }
    if (node.parent) {
      mydata = this.setData(mydata, node.parent);
      return mydata;
    } else {
      return mydata;
    }
  }
  newMyData: any = {};
  // 节点
  handleNodeClick(data: any, node) {
    // console.log(1111111111111, data);
    let myData = {};
    let newMyData = this.setData(myData, node);
    // console.log(newMyData);
    var _this = this;
    // 主设备
    if (_this.menuName === 0) {
      console.log(data);
      if (data.type === "city") {
        var params = {
          alarmType: "",
          isPush: "",
          openModel: "",
          page: 1,
          pointerName: "",
          size: 10,
          type: "1",
          station: "",
        };
        AuxiliaryMonitorModule.queryThresholdItem(params);
        AuxiliaryMonitorModule.gettreeList0("city");
      } else {
        AuxiliaryMonitorModule.gettreeList0("");
      }
      _this.list1.station = newMyData.stationId;
      _this.list1.bayName = newMyData.jgName;
      _this.list1.remoteType = newMyData.cjId;
      if (data.type === "voltage") {
        // 电压等级
        _this.list1.bayIdList = data.child;
      } else {
        _this.list1.bayIdList = [];
      }
      AuxiliaryMonitorModule.gettreeList1(_this.list1);
      // 辅控
    } else if (_this.menuName === 1) {
      _this.list2.areaId = newMyData.areaId;
      _this.list2.systemId = newMyData.menuId;
      _this.list2.station = newMyData.stationId;
      AuxiliaryMonitorModule.gettreeList2(_this.list2);
      // 在线监测
    } else if (_this.menuName === 2) {
      _this.list3.bayName = newMyData.deviceName;
      _this.list3.systemId = newMyData.monitorId;
      _this.list3.station = newMyData.stationId;
      AuxiliaryMonitorModule.gettreeList3(_this.list3);
    }
  }
  // 获取主设备Tree
  getMasterDeviceTree() {
    // console.log(111);

    (this as any).$services
      .getMasterDeviceTree()
      .then((result: any) => {
        console.log(11111, result);
        this.data1 = result.data;
        this.loading = false;
      })
      .catch((err: object) => {
        console.log(222);

        console.log(err);
        this.loading = false;
      });
  }

  // 获取辅控设备Tree
  getAuxiliaryTreeChild() {
    (this as any).$services
      .getAuxiliaryTreeChild()
      .then((result: any) => {
        // console.log(222222, result);
        this.data2 = result.data;
        this.loading = false;
      })
      .catch((err: object) => {
        console.log(err);
      });
  }

  // 获取在线监测设备Tree
  getOnlineMonitorTreeChild() {
    (this as any).$services
      .getOnlineMonitorTreeChild()
      .then((result: any) => {
        // console.log(33333, result);
        this.data3 = result.data;
        this.loading = false;
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
}
</script>

<style lang="scss" scoped>
.thresholdvalue-menu {
  width: 3.03rem;
  height: 100%;
  padding-top: 0.4rem;
  box-sizing: border-box;
  .content {
    width: 100%;
    height: 100%;
    &-btn {
      width: 100%;
      height: 0.88rem;
      // padding: 0.24rem 0;
      box-sizing: border-box;
    }
    &-tree {
      width: 100%;
      height: calc(100% - 0.88rem);
      padding: 0 0.1rem;
      box-sizing: border-box;
      overflow-y: auto;
      .search {
        width: 0.3rem;
        height: 0.3rem;
        border-right: 1px solid #717ca1;
        color: #9eeaec;
      }
    }
  }
}
</style>
<style lang="scss">
.thresholdvalue-menu {
  .actives {
    background: linear-gradient(
      360deg,
      rgba(20, 123, 252, 1) 0%,
      rgba(12, 157, 254, 1) 40%,
      rgba(3, 191, 255, 1) 100%
    );
  }
  .el-button {
    width: 0.8rem;
  }
}
</style>
